<template>
  <div class="main-container">
    <n-card content-style="padding: 0;" title="生活模式">
      <template #header-extra>
        <n-switch v-model:value="surfaceSetting.lifeSwitchValue">
          <template #checked>
            展示
          </template>
          <template #unchecked>
            隐藏
          </template>
        </n-switch>
      </template>
      <div v-show="!surfaceSetting.lifeSwitchValue">
        <n-tabs
            type="line"
            size="large"
            :tabs-padding="20"
            pane-style="padding: 20px;"
        >
          <n-tab-pane name="列表">
            <LifeModeList></LifeModeList>
          </n-tab-pane>
          <n-tab-pane name="日历">
           <life-mode-stat></life-mode-stat>
          </n-tab-pane>
        </n-tabs>
      </div>
    </n-card>
    <n-card content-style="padding: 0;" title="日程安排">
      <template #header-extra>
        <n-switch v-model:value="surfaceSetting.lifeItemSwitchValue">
          <template #checked>
            展示
          </template>
          <template #unchecked>
            隐藏
          </template>
        </n-switch>
      </template>
      <div v-show="!surfaceSetting.lifeItemSwitchValue">
        <n-tabs
            type="line"
            size="large"
            :tabs-padding="20"
            pane-style="padding: 20px;"
        >
          <n-tab-pane name="列表">
            <LifeModeItems></LifeModeItems>
          </n-tab-pane>
          <n-tab-pane name="统计">
            <LifeModeItemTimeStat></LifeModeItemTimeStat>
          </n-tab-pane>
        </n-tabs>
      </div>
    </n-card>
  </div>
</template>


<script setup lang="ts">
import LifeModeList from "@/views/lifeMode/lifeModeList/LifeModeList.vue";
import LifeModeItems from "@/views/lifeMode/lifeModeList/LifeModeItems.vue";
import {onBeforeMount, ref, watch} from 'vue'
import useVisitedRouteStore from "@/store/modules/visited-routes";
import UseSurfaceSettingStore from "@/store/modules/surfaceSetting";


import {UserState} from "@/store/types";
import { useMessage } from 'naive-ui'
import useUserStore from "@/store/modules/user";

import {useRoute, useRouter} from "vue-router";
import GoalPanel from "@/views/field/goal/GoalPanel.vue";
import LifeModeItemTimeStat from "@/views/lifeMode/lifeModeList/LifeModeItemTimeStat.vue";
import LifeModeStat from "@/views/lifeMode/lifeModeYearDuration.vue";
import {getSurfaceSetting} from "@/api/url";


const userStore = useUserStore()
const message = useMessage()
const useSurfaceSetting = UseSurfaceSettingStore()
const useVisitedRoute = useVisitedRouteStore()
const router = useRouter()
const route = useRoute()

const content = ref("不知道")
const surfaceSetting = useSurfaceSetting.getSurfaceSetting();

</script>



<style scoped>
.n-text {
  font-size: 18px;
}
</style>